<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="productAttr" :rules="rules" ref="productAttrFrom" label-width="auto">
      <el-form-item label="属性名称：" prop="name">
        <el-input v-model="productAttr.name"></el-input>
      </el-form-item>
      <el-form-item label="商品类型：">
        <el-select v-model="productAttr.productAttributeCategoryId" placeholder="请选择">
          <el-option v-for="item in productAttrCateList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类筛选样式:">
        <el-radio-group v-model="productAttr.filterType">
          <el-radio :value="0">普通</el-radio>
          <el-radio :value="1">颜色</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="能否进行检索:">
        <el-radio-group v-model="productAttr.searchType">
          <el-radio :value="0">不需要检索</el-radio>
          <el-radio :value="1">关键字检索</el-radio>
          <el-radio :value="2">范围检索</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品属性关联:">
        <el-radio-group v-model="productAttr.relatedStatus">
          <el-radio :value="1">是</el-radio>
          <el-radio :value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="属性是否可选:">
        <el-radio-group v-model="productAttr.selectType">
          <el-radio :value="0">唯一</el-radio>
          <el-radio :value="1">单选</el-radio>
          <el-radio :value="2">复选</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="属性值的录入方式:">
        <el-radio-group v-model="productAttr.inputType">
          <el-radio :value="0">手工录入</el-radio>
          <el-radio :value="1">从下面列表中选择</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="属性值可选值列表:">
        <el-input :autosize="true" type="textarea" v-model="inputListFormat"></el-input>
      </el-form-item>
      <el-form-item label="是否支持手动新增:">
        <el-radio-group v-model="productAttr.handAddStatus">
          <el-radio :value="1">是</el-radio>
          <el-radio :value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序属性：">
        <el-input v-model="productAttr.sort"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button v-if="!route.query.id" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { fetchList } from '@/api/productAttrCate'
import { createProductAttr, getProductAttr, updateProductAttr } from '@/api/productAttr'
import { ElMessage, type FormInstance } from 'element-plus'
import { ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { ProductAttr, ProductAttrDto } from '@/models/productAttr'
import type { ProductAttrCate } from '@/models/productAttrCate'

defineOptions({ name: 'ProductAttrDetail' })
const rules = {
  name: [
    { required: true, message: '请输入属性名称', trigger: 'blur' },
    { min: 2, max: 140, message: '长度在 2 到 140 个符', trigger: 'blur' },
  ],
}
const route = useRoute()
const router = useRouter()
const productAttrFrom = ref<FormInstance>()
const productAttr = ref<ProductAttr>({})
const productAttrCateList = ref<ProductAttrCate[]>([])
const inputListFormat = ref('')
onMounted(async () => {
  if (route.query.id) {
    const response = await getProductAttr(Number(route.query.id))
    productAttr.value = response.data.data
    inputListFormat.value = productAttr.value.inputList + ''.replace(/,/g, '\n')
  } else {
    resetProductAttr()
  }
  getCateList()
})
watch(inputListFormat, (newValue) => {
  newValue = newValue.replace(/\n/g, ',')
  productAttr.value.inputList = newValue
})
async function getCateList() {
  let listQuery = { pageNum: 1, pageSize: 100 }
  const response = await fetchList(listQuery)
  productAttrCateList.value = response.data.data.list
}
function resetProductAttr() {
  productAttr.value = {}
  productAttr.value.productAttributeCategoryId = Number(route.query.cid)
  productAttr.value.type = Number(route.query.type)
}
async function onSubmit() {
  await productAttrFrom.value?.validate()
  if (route.query.id) {
    updateProductAttr(productAttr.value as ProductAttrDto)
    ElMessage.success('修改成功')
  } else {
    createProductAttr(productAttr.value as ProductAttrDto)
    ElMessage.success('提交成功')
  }
  resetForm()
  router.back()
}
function resetForm() {
  productAttrFrom.value?.resetFields()
  resetProductAttr()
}
</script>

<style scoped></style>
